import React, { useState, useEffect } from 'react'
import { Layout, Menu, Modal } from 'antd';
import imgurl from '@/static/img/tuichu.png'
import cxy from '@/static/img/cxy.jpg'
import cookie from 'react-cookies'
import { withRouter } from 'react-router-dom'
import { menulist } from '@/api/menulist/Menu.js'
import { connect } from 'react-redux'
import { getuserinfo } from '@/api/user.js'

import SubMenu from 'antd/lib/menu/SubMenu';
const { Sider } = Layout;
function SideMenu(props) {

  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [menu, setmenulist] = useState(menulist)
  const [user, setuser] = useState({})

  // 获取用户信息
  useEffect(async () => {
    const res = await getuserinfo()
    // console.log(res);
    setuser(res.user)
  }, [])

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
      cookie.remove('usertoken')
      props.history.replace('/login')
    }, 1000);
  };

  const randerMenu = (menu) => {
    return menu.map(item => {
      if (item.children) {
        return <SubMenu key={item.key} title={item.title} icon={item.icon}>
          {randerMenu(item.children)}
        </SubMenu>
      }
      return <Menu.Item key={item.key} icon={item.icon} onClick={() => { props.history.push(item.key) }}>{item.title}</Menu.Item>
    })
  }

  // console.log(props.location.pathname);
  return (
    <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
      <div style={{ display: 'flex', height: '100%', "flexDirection": "column" }}>
        <div className="menuheader">
          <a className='sidebar-logo-link'>
            <img src={require('@/static/img/logo.png')} className="sidebar-logo"></img>
            <h1 className="sidebar-title">汇客CRM系统 </h1>
          </a>
        </div>
        <div style={{ flex: 1, "overflow": "auto" }}>
          <Menu
            className='menumain'
            theme="dark"
            mode="inline"
            selectedKeys={[props.location.pathname]}
            defaultOpenKeys={["/" + props.location.pathname.split("/")[1]]}
          >
            {
              randerMenu(menu)
            }
          </Menu>
        </div>
        <div className='menufooter'>
          <div>
            <img src={cxy} className='user-avatar' alt=''></img>
          </div>
          <div className='username'>{user.createBy}</div>
          <img src={imgurl} alt='' className='user-exit' onClick={() => setVisible(true)}></img>
        </div>
      </div>
      <Modal
        title="提示"
        centered
        visible={visible}
        onOk={handleOk}
        onCancel={() => setVisible(false)}
        confirmLoading={confirmLoading}
      >
        <p>确定注销并退出系统吗？</p>
      </Modal>
    </Sider>
  )
}


const mapStateToProps = ({ CollApsedReducer: { isCollapsed } }) => {
  return {
    isCollapsed
  }
}

const mapDispatchToProps = {
  changeCollapsed() {
    return {
      type: "change_collapsed",
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(SideMenu))